<template>
  <div class="layout">
    <Layout style="height: 100%">
      <Menu mode="horizontal" theme="light" class="header">
        <div class="logo">
          <img src="../assets/imgs/LOGO.png" alt="" />
        </div>
        <div class="bread-nav">
          <Tabs
            :value="activeValue"
            type="card"
            closable
            style="width: 95%"
            @on-click="changeRoute"
            @on-tab-remove="handleTabRemove"
          >
            <TabPane
              :label="item.name"
              :name="item.key"
              v-for="item in topBreadList"
              :key="item.key"
            ></TabPane>
          </Tabs>
        </div>
        <div class="layout-nav">
          <Dropdown @on-click="Out">
            <span class="name">{{ name }}</span>
            <Icon type="ios-arrow-down"></Icon>
            <DropdownMenu slot="list">
              <DropdownItem>退出</DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </div>
        <div></div>
      </Menu>
      <Layout>
        <Sider hide-trigger :style="{ background: '#fff' }">
          <Menu
            :active-name="activeName"
            :open-names="openNames"
            width="auto"
            class="bgc"
            ref="Menu"
            accordion
            @on-select="routerPush"
          >
            <Submenu :name="item.name" v-for="item in MenuList" :key="item.key">
              <template slot="title">
                <Icon :type="aaa" />
                <span slot="title" class="title">{{ item.name }}</span>
              </template>
              <div
                @click="clickItem(child)"
                v-for="child in item.children"
                :key="child.key"
              >
                <MenuItem :name="child.name" :to="child.path">{{
                  child.name
                }}</MenuItem>
              </div>
            </Submenu>
          </Menu>
        </Sider>
        <Layout :style="{ padding: '15px 15px 15px 15px' }">
          <Content :style="fujianWH" class="auto" id="auto">
            <router-view :key="key" v-if="!$route.meta.keepAlive"></router-view>
            <keep-alive>
              <router-view
                v-if="$route.meta.keepAlive"
                :key="key"
              ></router-view>
            </keep-alive>
          </Content>
        </Layout>
      </Layout>
    </Layout>
  </div>
</template>
<script>
import { mapState } from "vuex";
import bus from "../components/bus";

export default {
  name: "Home",
  data() {
    return {
      isCollapsed: false,
      Menu: [],
      topNav: [],
      aaa: "ios-filing",
      dom: "",
      activeName: "",
      openNames: [],
      topBreadList: [], //面包屑数据
      activeValue: "", //面包屑高亮值
      outFlag: "", //是否是退出
      nowKey: "",
      fileKey: "", //文件高亮标识
      dataKey: "", //大数据信息高亮标识
    };
  },
  computed: {
    fujianWH() {
      return `height: calc((100vh - 133px));background: #ffffff;`;
    },
    // huanjing(){
    //   return process.env.NODE_ENV === "test"?'域名':'200'
    // },
    // overflow: auto;
    rotateIcon() {
      return ["menu-icon", this.isCollapsed ? "rotate-icon" : ""];
    },
    menuitemClasses() {
      return ["menu-item", this.isCollapsed ? "collapsed-menu" : ""];
    },
    MenuList() {
      return this.$store.state.MenuList;
    },
    name() {
      return this.$store.state.userName;
    },
    key() {
      return this.$route.fullPath;
    },
  },
  methods: {
    //滚动
    handleScroll(height) {
      this.dom.scrollTop = height;
    },
    select(val) {
      // console.log(val);
    },
    routerPush(val) {
      // console.log(val);
    },
    //左侧菜单点击
    clickItem(item) {
      this.activeValue = item.key; //高亮赋值
      console.log(this.topBreadList);
      let arr = this.topBreadList.filter((val) => {
        return item.key === val.key;
      });
      if (!arr.length) {
        this.topBreadList.push({
          name: item.name, //名称
          key: item.key, //key值
          path: item.path, //路由地址
        });
        this.activeValue = item.key; //新增tabs 后添加高亮
        // console.log(this.topBreadList)
      }
    },
    //点击面包屑
    changeRoute(key) {
      let arr = this.topBreadList.filter((item) => {
        return item.key === key;
      });
      console.log(arr[0]);
      if (arr[0].orderNo && !arr[0].url) {
        this.$router.push({
          path: arr[0].path,
          query: {
            name: arr[0].name,
            taskId: arr[0].taskId,
            orderNo: arr[0].orderNo,
            approveType: arr[0].approveType,
            memberName: arr[0].memberName,
            memberNo: arr[0].memberNo,
            templateCode: arr[0].templateCode ? arr[0].templateCode : "",
          },
        });
      } else if (arr[0].url) {
        this.$router.push({
          path: arr[0].path,
          query: {
            url: arr[0].url,
            key: arr[0].key,
          },
        });
      } else {
        this.$router.push(arr[0].path);
      }
      this.activeValue = key; // 点击后高亮赋值
      this.activeName = arr[0].name; //左侧列表高亮切换
      let nowArr = [];
      this.MenuList.forEach((val) => {
        val.children.forEach((item1) => {
          if (item1.key === arr[0].key) {
            // nowName = val.name;
            // console.log(val.name);
            nowArr[0] = val.name;
            this.openNames = nowArr;
            // console.log(this.openNames);
            this.upDom();
          }
        });
      });
    },
    //退出
    Out() {
      let url =
        process.env.NODE_ENV === "test"
          ? "https://sit-mscar-leasefront.msfl.com.cn/#/login"
          : "http://172.28.40.200:81/#/login";
      this.$Modal.confirm({
        title: "提示",
        width: "322px",
        height: "145px",
        content: "是否要退出登录？",
        onOk: async () => {
          localStorage.removeItem("token");
          localStorage.setItem("outFlag", "1"); //表明退出了
          window.location.href = url;
        },
      });
    },

    //tabs 删除事件
    handleTabRemove(key) {
      // console.log(key);
      //说明删除的是自己本身
      if (key === this.activeValue) {
        console.log("自己本身");
        let arr = this.topBreadList.filter((item) => {
          return item.key !== key;
        });
        this.topBreadList = arr;
        if (this.topBreadList.length) {
          // 让最后一个高亮
          // console.log(this.topBreadList)
          this.activeValue = this.topBreadList[
            this.topBreadList.length - 1
          ].key;
          //跳转到最后一个路由
          //判断是不是携带了参数
          let orderItem = this.topBreadList[this.topBreadList.length - 1];
          // console.log(orderItem)
          if (orderItem.orderNo) {
            // console.log(1111);
            this.$router.push({
              path: orderItem.path,
              query: {
                name: orderItem.name,
                key: orderItem.key,
                taskId: orderItem.taskId,
                orderNo: orderItem.orderNo,
                approveType: orderItem.approveType,
                memberName: orderItem.memberName,
                memberNo: orderItem.memberNo,
                templateCode: orderItem.templateCode
                  ? orderItem.templateCode
                  : "",
                url: orderItem.url,
              },
            });
          } else {
            this.$router.push(
              this.topBreadList[this.topBreadList.length - 1].path
            );
          }
        } else {
          this.$router.push("/blank/index"); //所有的都已经关闭 跳转到空白页面
          this.activeValue = null; //重置高亮状态
          this.activeName = null; //重置左侧菜单选中状态
          this.openNames = []; //重置左侧菜单展开状态
          this.topBreadList = []; //重置顶部面包屑数据
          this.upDom(); //更新菜单选中
        }
      } else {
        console.log("不是当前自己");
        let arr = this.topBreadList.filter((item) => {
          return item.key !== key;
        });
        this.topBreadList = arr;
      }
    },
    Menus(val) {
      // console.log(this.MenuList);
      let item = this.MenuList[0].children[0];
      this.topBreadList.push({
        name: item.name, //名称
        key: item.key, //key值
        path: item.path, //路由地址
      });
      this.activeValue = item.key; //赋值首个高亮
      this.activeName = this.MenuList[0].children[0].name;
      this.openNames = [this.MenuList[0].name];
      this.upDom(); //手动更新展开选中
    },
    upDom() {
      this.$nextTick(() => {
        this.$refs.Menu.updateOpened();
        this.$refs.Menu.updateActiveName();
      });
    },
    setTitle(page) {
      if (page.indexOf("carType") > 0) {
        document.title = "民生金融租赁车辆管理中心";
      } else {
        document.title = "民生金融租赁审批中心";
      }
    },
  },
  created() {
    // console.log(this.$route.fullPath);
    let page = this.$route.fullPath;
    this.setTitle(page);
  },
  mounted() {
    bus.$on("cloesFileRoute", (e) => {
      console.log(e);
      let closeArr = this.topBreadList.filter((item) => {
        return item.key !== e.key;
      });
      // console.log(closeArr)
      this.topBreadList = closeArr; //关闭后的赋值
      this.activeValue = this.topBreadList[this.topBreadList.length - 1].key; //关闭后让最后一个高亮
    });
    bus.$on("scroll", (e) => {
      this.handleScroll(e.height);
    });
    this.dom = document.getElementById("auto");
    bus.$on("topRoute", (e) => {
      let onlyOne = this.topBreadList.filter((item) => {
        return item.orderNo === e.orderNo;
      });
      if (!onlyOne.length) {
        this.topBreadList.push({
          path: e.path,
          name: e.name,
          taskId: e.taskId,
          orderNo: e.orderNo,
          approveType: e.approveType,
          memberName: e.memberName,
          memberNo: e.memberNo,
          templateCode: e.templateCode,
          key: e.key,
          url: e.url,
        });
        this.activeValue = e.key; //高亮展示
        this.nowKey = e.key;
      } else {
        this.activeValue = this.nowKey;
      }
    });
    bus.$on("topRouteFile", (e) => {
      let onlyFile = this.topBreadList.filter((item) => {
        return e.orderNo === item.orderNo;
      });
      // console.log(onlyFile)
      if (onlyFile.length === 1 || onlyFile[1].name !== "文审附件") {
        this.topBreadList.push({
          path: e.path,
          name: e.name,
          taskId: e.taskId,
          orderNo: e.orderNo,
          approveType: e.approveType,
          memberName: e.memberName,
          memberNo: e.memberNo,
          templateCode: e.templateCode,
          key: e.key,
          url: e.url,
        });
        this.activeValue = e.key; //高亮展示
        this.fileKey = e.key;
      } else {
        this.activeValue = this.fileKey;
      }
    });
    bus.$on("topRouteData", (e) => {
      let onlyData = this.topBreadList.filter((item) => {
        return e.orderNo === item.orderNo;
      });
      // console.log(onlyData)
      if (onlyData.length === 1 || onlyData[1].name !== "大数据信息") {
        this.topBreadList.push({
          path: e.path,
          name: e.name,
          orderNo: e.orderNo,
          approveType: e.approveType,
          key: e.key,
          url: e.url,
        });
        this.activeValue = e.key; //高亮展示
        this.dataKey = e.key;
      } else {
        this.activeValue = this.dataKey;
      }
    });
  },
  watch: {
    MenuList(val, oldVal) {
      // 默认跳转
      //说明退出后进入的
      if (localStorage.outFlag == "1") {
        let page = val[0].children[0].path;
        if (page.indexOf("carType") > 0) {
          document.title = "民生金融租赁车辆管理中心";
        } else {
          document.title = "民生金融租赁审批中心";
        }
        this.$router.push({ path: page });
        localStorage.removeItem("outFlag"); //清除
      }
      //首次进入的
      if (val.length > 0 && !localStorage.pathUrl) {
        console.log("首次");
        let page = val[0].children[0].path;
        this.setTitle(page);
        this.$router.push({ path: page });
      }
      this.Menus();
    },
  },
};
</script>

<style lang="less" scoped>
//默认
/deep/.ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab {
  padding: 0px 10px;
  border-radius: 10px;
  border: none;
  height: 22px;
  font-size: 12px;
  color: #929ea8;
}
//移入
/deep/.ivu-tabs-nav .ivu-tabs-tab:hover {
  color: #006dba !important;
}
//选中后的
/deep/.ivu-tabs-nav .ivu-tabs-tab-active {
  color: #006dba !important;
  background-color: #e8f0f6 !important ;
}
//整体tab
/deep/.ivu-tabs-bar {
  border: none !important;
  margin-top: 10px;
  margin-bottom: 0;
}
// 左箭头
/deep/.ivu-tabs-nav-prev {
  line-height: 22px !important;
}
//右箭头
/deep/.ivu-tabs-nav-next {
  line-height: 22px !important;
}
/deep/.ivu-layout-header {
  padding: 0;
  background: #fff;
}
/deep/.ivu-menu-vertical .ivu-menu-submenu .ivu-menu-item {
  color: rgba(255, 255, 255, 0.8);
}
/deep/.ivu-menu-vertical .ivu-menu-item:hover,
.ivu-menu-vertical .ivu-menu-submenu-title:hover {
  color: rgba(255, 255, 255, 0.8) !important;
}
.name {
  cursor: pointer;
}
.bread-nav {
  display: flex;
  padding-top: 15px;
  // flex: 1;
  padding-left: 10px;
  padding-bottom: 6px;
  width: 70%;
  position: absolute;
  white-space: nowrap;
  left: 200px;
  overflow-x: scroll;
  overflow-y: hidden;
  // padding-bottom: 5px;
  &::-webkit-scrollbar {
    // display: none;
    width: 3px;
    height: 4px;
  }
  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #006dba;
  }
  // background-color: red;
  .top-nav {
    // min-width: 55px;
    min-width: 100px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 22px;
    padding: 5px;
    margin-left: 10px;
    // background-color: #f;
    background-color: #f5f7f9;
    border-radius: 11px;
    font-size: 12px;
    color: grey;
    cursor: pointer;
    .icon-close {
      width: 12px;
      height: 12px;
      margin-left: 10px;
      background: url("../assets/imgs/close.png") no-repeat center;
    }
  }
  .top-nav:hover {
    background-color: #e8f0f6;
    color: #006dba;
  }
  .top-nav-active {
    background-color: #e8f0f6;
    color: #006dba;
  }
}
.header {
  display: flex;
  padding-right: 50px;
  height: 50px;
  position: relative;
}
/deep/.ivu-menu-submenu-title {
  color: rgba(255, 255, 255, 0.8);
}
/deep/.ivu-menu-submenu-title:hover {
  color: #fff;
}
/deep/.ivu-menu-light.ivu-menu-vertical
  .ivu-menu-item-active:not(.ivu-menu-submenu) {
  color: #fff;
  background-color: #005ea1;
}
.ivu-menu-item:hover {
  background-color: #005ea1;
}
.logo {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #006dba;
  width: 199px;
  height: 100%;
}
.layout {
  height: 100vh;
  background: #f5f7f9;
  position: relative;
  overflow: hidden;
}
/deep/.ivu-menu-horizontal.ivu-menu-light:after {
  background: none;
}
.layout-logo {
  width: 100px;
  height: 30px;
  background: #5b6270;
  float: left;
  position: relative;
  top: 15px;
  left: 20px;
}
.auto {
  overflow: auto;
}
.bgc {
  height: 100%;
  background-color: #006dba;
}
.layout-nav {
  width: 80px;
  margin: 0 auto;
  margin-right: 0;
  a {
    color: #f5f7f9 !important;
  }
}
</style>
